<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>
	<ui:composition template="./plantilla/plantilla.xhtml">
		<ui:define name="center">
			<div class="h_title">#{main.listaEventos}</div>
			<h:form id="form">
				<p:growl id="grwEvento" showDetail="true" />
				<p:panel id="panellista" style="font-size:small;margin: auto">
					<p:dataTable id="dtbEvento" var="evento" sortMode="multiple"
						rows="15" paginator="true" filterDelay="50" rendered="true"
						rowStyleClass="#{rowIndex mod 2 ne 0 ? 'row1' : 'null'}"
						rowIndexVar="rowIndex" resizableColumns="true" scrollWidth="true"
						paginatorPosition="bottom" value="#{eventoController.listaEvento}"
						style="width: 100%;float: center">

						<p:column headerText="#{main.nombre}" style="width:25%"
							filterMatchMode="contains">
							<h:outputText value="#{evento.nombre}" />
						</p:column>

						<p:column headerText="#{main.fechaPartida}" style="width:20%">
							<h:outputText value="#{evento.fechaPartida}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</p:column>

						<p:column headerText="#{main.fechaRetorno}" style="width:20%">
							<h:outputText value="#{evento.fechaRetorno}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
						</p:column>

						<p:column headerText="#{main.horaPartida}" style="width:20%">
							<h:outputText value="#{evento.horaPartida}">
								<f:convertDateTime timeZone="America/Lima" pattern="hh:mm a" />
							</h:outputText>
						</p:column>

						<p:column headerText="#{main.horaRetorno}" style="width:20%">
							<h:outputText value="#{evento.horaRetorno}">
								<f:convertDateTime timeZone="America/Lima" pattern="hh:mm a" />
							</h:outputText>
						</p:column>

						<p:column headerText="#{main.puntos}" style="width:12%">
							<h:outputText value="#{evento.puntos}" />
						</p:column>

						<p:column style="width:4%">
							<p:commandButton id="btnUpdEvento" icon="ui-icon-pencil"
								title="#{main.ModificarEvento}" onclick="vdlgUpdEvento.show()">
								<f:setPropertyActionListener value="#{evento}"
									target="#{eventoController.eventoSeleccionado}" />
							</p:commandButton>
						</p:column>
						<p:column style="width:4%">
							<p:commandButton id="btnDetEvento" icon="ui-icon-pencil"
								title="#{main.DetalleEvento}" onclick="vdlgDetEvento.show()">
								<f:setPropertyActionListener value="#{evento}"
									target="#{eventoController.eventoSeleccionado}" />
							</p:commandButton>
						</p:column>
					</p:dataTable>
					<p:commandButton id="btnCrearEvento"
						onclick="vdlgCrearEvento.show()" value="#{main.crear}">
					</p:commandButton>
				</p:panel>
			</h:form>
			<h:form id="formCrearEvento">
				<p:dialog id="dlgCrearEvento" header="#{main.registroEvento}"
					widgetVar="vdlgCrearEvento" resizable="false" position="center"
					width="400" modal="true" style="position:absolute;"
					showEffect="fade" hideEffect="fold">
					<h:panelGrid columns="3" id="pnlInsEvento" style="width: 100%">
						<h:outputLabel value="#{main.nombre}" styleClass="colum" />
						<h:outputLabel value=":" styleClass="colum" />
						<p:inputText id="txtInsNombres"
							value="#{eventoController.evento.nombre}" />

						<h:outputLabel value="#{main.fechaPartida}" />
						<h:outputLabel value=":" />
						<p:calendar id="dtFechaPartida"
							value="#{eventoController.evento.fechaPartida}" />

						<h:outputLabel value="#{main.fechaRetorno}" />
						<h:outputLabel value=":" />
						<p:calendar id="dtFechaRetorno"
							value="#{eventoController.evento.fechaRetorno}" />


						<h:outputLabel value="#{main.horaPartida}" />
						<h:outputLabel value=":" />
						<p:calendar id="dtInsHoraPartida" pattern="HH:mm"
							value="#{eventoController.evento.horaPartida}" timeOnly="true" />

						<h:outputLabel value="#{main.horaRetorno}" />
						<h:outputLabel value=":" />
						<p:calendar id="dtInsHoraRetorno" pattern="HH:mm"
							value="#{eventoController.evento.horaRetorno}" timeOnly="true" />

						<h:outputLabel value="#{main.puntos}" styleClass="colum" />
						<h:outputLabel value=":" styleClass="colum" />
						<p:spinner id="spnInsPuntos" min="0" max="10"
							value="#{eventoController.evento.puntos}" />

						<p:spacer height="10" />
						<p:spacer height="10" />
						<p:spacer height="10" />
						<h:outputLabel />
						<h:outputLabel />
						<p:commandButton id="btnGrabarEvento" value="#{main.grabar}"
							title="Grabar" ajax="true"
							update=":form:dtbEvento, :form:grwEvento"
							actionListener="#{eventoController.grabarEvento}"
							style="background:#043f52;color:white;float:right;"
							onclick="vdlgCrearEvento.hide()">
						</p:commandButton>
					</h:panelGrid>
				</p:dialog>
			</h:form>

			<h:form id="formUpdEvento">
				<p:dialog id="dlgUpdEvento" header="#{main.modificacionEvento}"
					widgetVar="vdlgUpdEvento" resizable="false" position="center"
					width="400" modal="true" style="position:absolute;"
					showEffect="fade" hideEffect="fold">
					<h:panelGrid columns="3" id="pnlUpdEvento" style="width: 100%">

						<p:spacer height="10" />
						<p:spacer height="10" />
						<p:spacer height="10" />
						<h:outputLabel />
						<h:outputLabel />
						<p:commandButton id="btnModifcarEvento" value="#{main.grabar}"
							title="Grabar" ajax="true"
							update=":form:dtbEvento, :form:grwEvento"
							actionListener="#{eventoController.grabarEvento}"
							style="background:#043f52;color:white;float:right;"
							onclick="vdlgUpdEvento.hide()">
						</p:commandButton>
					</h:panelGrid>
				</p:dialog>
			</h:form>

			<h:form id="formDetalleEvento">
				<p:dialog id="dlgDetEvento" header="#{main.detalleEvento}"
					widgetVar="vdlgDetEvento" resizable="false" position="center"
					width="400" modal="true" style="position:absolute;"
					showEffect="fade" hideEffect="fold">
					<h:panelGrid columns="3" id="pnlDetEvento" style="width: 100%">
<!-- 						<p:pickList id="pklInsClientes" -->
<!-- 							value="#{eventoController.clientes}" var="cliente" -->
<!-- 							effect="bounce" itemValue="#{cliente}" -->
<!-- 							itemLabel="#{cliente.nombres}" converter="cliente" -->
<!-- 							showSourceControls="true" showTargetControls="true" -->
<!-- 							showCheckbox="true"> -->

<!-- 							<f:facet name="sourceCaption">Clientes Nuevos</f:facet> -->
<!-- 							<f:facet name="targetCaption">Clientes Inscritos</f:facet> -->


<!-- 							<p:column style="width:75%;">   -->
<!-- 					            #{cliente.nombres}  -->
<!-- 					        </p:column> -->
<!-- 						</p:pickList> -->

						<p:spacer height="10" />
						<p:spacer height="10" />
						<p:spacer height="10" />
						<h:outputLabel />
						<h:outputLabel />
						<p:commandButton id="btnDetalleEvento"
							value="#{main.grabarCliente}" title="#{main.grabarCliente}"
							ajax="true" update=":form:grwEvento"
							actionListener="#{eventoController.grabarDetalleEvento}"
							style="background:#043f52;color:white;float:right;"
							onclick="vdlgDetEvento.hide()">
						</p:commandButton>
					</h:panelGrid>
				</p:dialog>
			</h:form>
		</ui:define>
	</ui:composition>
</h:body>
</html>
